import React, { Component } from 'react';
import './布局/css/index.css';
import MyHeader from './myHeader.js';
import MyMain from './body/myMain';
import MyFooter from './myFooter';

class App extends Component {
    constructor(props) {
        super(props);
        // 一开始刷新就是hash值所在的页面，否则走默认的'/all'页面
        let hash = window.location.hash ? window.location.hash.slice(1) : '/all';
        this.state = {
            hash,
            val: '',
            ary: [
                {
                    id: 0,
                    txt: '明天的阳光真好!',
                    checked: false
                }, {
                    id: 1,
                    txt: '明天天气晴朗',
                    checked: false
                }, {
                    id: 2,
                    txt: '一起出去踏青',
                    checked: true
                }
            ]
        };
    }
    render() {
        const { val, ary, hash } = this.state;
        let footer = null;
        if (ary.length) {
            footer = <MyFooter
                num={ary.filter(item => !item.checked).length}
                chash={this.phash}
                hash={hash}
            />
        }
        let ary2 = ary.filter(item => {
            switch (hash) {
                case '/all':
                    return item;
                case '/unchecked':
                    return !item.checked;
                case '/checked':
                    return item.checked;
                default:
                    return item;
            }
        })
        return (
            <section className="todoapp">
                <div>
                    <MyHeader
                        val={val}
                        pchangeval={this.changeval}
                        padd={this.addAry}
                    />
                    <MyMain
                        pary={ary2}
                        pchecked={this.changeChecked}
                        premove={this.removeNode}
                        replacetxt={this.replacetxt}
                    />
                    {footer}
                </div>
            </section>
        );
    }
    //修改hash值
    phash = (hash) => {
        this.setState({ hash })
    }
    //修改内容
    changeval = (str) => {
        if (typeof str === 'string') {
            this.setState({ val: str });
            return;
        }
    }
    //修改数据
    replacetxt = (id, newVal) => {
        let { ary } = this.state;
        for (var i = 0; i < ary.length; i++) {
            if (ary[i].id === id) {
                ary[i].txt = newVal;
                break;
            }
        }
        this.setState({ary})
    }

    //删除数据 过滤掉不等于id的值
    removeNode=(id)=>{
        let {ary}=this.state;
        ary=ary.filter(item=>item.id !== id);
        this.setState({ary})
    }
    //切换每个checked的值
    changeChecked=(id)=>{
        let {ary}=this.state;
        for(var i=0;i<ary.length;i++){
            if(ary[i].id===id){
                ary[i].checked=!ary[i].checked;
                break;
            }
        }
        this.setState({ary})
    }

    //push数据
    addAry=(val)=>{
        let {ary}=this.state;
        ary.unshift({
            id:Date.now(),
            txt:val,
            checked:false
        })
        this.setState({ary})
    }
}

export default App;